<a href="https://github.com/2fdevs/videogular/edit/master/app/scripts/com/2fdevs/videogular/plugins/vg-controls/vg-scrub-bar/vg-scrub-bar-thumbnails.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/2fdevs/videogular/blob/6f55d80/app/scripts/com/2fdevs/videogular/plugins/vg-controls/vg-scrub-bar/vg-scrub-bar-thumbnails.js#L56" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">vgScrubBarThumbnails</code>
<div><span class="hint">directive in module <code ng:non-bindable="">com.2fdevs.videogular.plugins.controls</code>
</span>
</div>
</h1>
<div><h2 id="description">Description</h2>
<div class="description"><div class="com-2fdevs-videogular-plugins-controls-directive-page com-2fdevs-videogular-plugins-controls-directive-vgscrubbarthumbnails-page"><p>Layer inside vg-scrub-bar to display thumbnails.</p>
<p>Param thumbnails could be a string url pointing to a strip of thumbnails or an array of objects with the same
format that you can find in cue points.</p>
<p><strong>Strip of thumbnails</strong>
Must be an image with exactly 100 thumbnails. Recommended size per each thumbnail 107x60
Example of param value: &quot;assets/images/strip-of-thumbnails.jpg&quot;</p>
<p>To create a strip of thumbnails you can use ffmpeg:
ffmpeg -loglevel panic -y -i app/assets/videos/videogular.mp4 -frames 1 -q:v 1 -vf
&quot;select=not(mod(n\,29)),scale=-1:60,tile=100x1&quot; app/assets/thumbnails/thumbnail.jpg</p>
<p><strong>List of thumbnails</strong>
Array with a list of cue points as images. You can specify start or a lapse with start and end.
Example of param value:</p>
<p>[
    {
        &quot;timeLapse&quot;: {
            &quot;start&quot;: 5
        },
        params: {
            &quot;thumbnail&quot;: &quot;assets/thumbnails/thumbnail-shown-at-second-5.jpg&quot;
        }
    },
    {
        &quot;timeLapse&quot;: {
            &quot;start&quot;: 49,
            &quot;end&quot;: 60
        },
        &quot;params&quot;: {
            &quot;thumbnail&quot;: &quot;assets/thumbnails/thumbnail-shown-between-seconds-49-and-60.jpg&quot;
        }
    }
]</p>
<pre class="prettyprint linenums">
&lt;videogular vg-theme="config.theme.url"&gt;
   &lt;vg-media vg-src="sources"&gt;&lt;/vg-media&gt;

   &lt;vg-controls&gt;
       &lt;vg-scrub-bar&gt;
           &lt;vg-scrub-bar-thumbnails vg-thumbnails='config.thumbnails'&gt;&lt;/vg-scrub-bar-thumbnails&gt;
       &lt;/vg-scrub-bar&gt;
   &lt;/vg-controls&gt;
&lt;/videogular&gt;
</pre>
</div></div>
<h2 id="usage">Usage</h2>
<div class="usage">as element:<pre class="prettyprint linenums">&lt;vg-scrub-bar-thumbnails&gt;
&lt;/vg-scrub-bar-thumbnails&gt;</pre>
</div>
</div>
